<template>
	<div class="services">
		<div class="menberConTitle flex" style="justify-content: space-between;">
			<div class="tableTitle">任务分组列表</div>
			<!-- <div> -->
				<!-- <el-button round size="mini" type="primary">新增任务</el-button> -->
			<!-- </div> -->
		</div>
		<el-tabs v-model="activeName" @tab-click="handleClick">
		    <el-tab-pane label="已安排" name="first">
				<yet :key="componentKey" @tabelclick="tabelclick"></yet>
			</el-tab-pane>
		    <el-tab-pane label="未安排" name="second">
				<not :key="componentKey"></not>
			</el-tab-pane>
		  </el-tabs>
		
	</div>
</template>

<script>
	import yet from './components/yet.vue'
	import not from './components/not.vue'
	export default{
		components:{
			yet,
			not
		},
		data(){
			return{
				activeName: 'first',
				tableData: [],
				componentKey: new Date().getTime()
			}
		},
		methods:{
			handleClick(e){
				if(this.activeName == 'second'){
					this.$parent.$data.detailsIsShow = false
				} else {
					this.$parent.$data.detailsIsShow = true
				}
				this.componentKey = new Date().getTime()
			},
			tabelclick(id){
				// console.log(id)
				this.$parent.$refs.serviceConfig.queryData.teamId = id
				this.$parent.$refs.serviceConfig.getPageData()
			}
		}
	}
</script>

<style scoped="scoped">
	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		margin-top: 20px;
	}
	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}
	.services>>>.isdelate{
		color: #F42929;
	}
</style>
